<template>
    <view class="content">
        <view class="bg"></view>
		
		<view class="box u-p-t-30 u-p-b-30">
			<view class="item">
				<image src="@/static/del/5.png" class="del-07"></image>
			    <view class="item-r">
			        <view class="goods-name">
						名称名称名称名称名称名称名称名称名称名称名称名称名称
					</view>
					<view class="spec">共86节</view>	
			        <view class="down">
			            <view class="price">
							￥<text class="price-num">600</text>
						</view>
						<view>x1</view>
			        </view>
			    </view>
			</view>
		    <view class="total">
		        <view>共1套课程 实付款：</view>
		        <view class="total-price">
					￥<text class="total-price-num">600</text>
				</view>
		    </view>
		</view>
		
		<view class="box2 u-p-t-30">
			<view class="text">
				<u-icon name="edit-pen" size="36" class="u-m-r-15"></u-icon>
				<textarea placeholder="请输入备注内容~" maxlength="200" class="t-inp"></textarea>
			</view>
			<view class="img-box">
				<image src="../../../static/image/photo.png" class="photo"></image>
				<image src="../../../static/image/photo.png" class="photo"></image>
				<image src="../../../static/image/photo.png" class="photo"></image>
				<image src="../../../static/image/photo.png" class="photo"></image>
				<image src="../../../static/image/photo.png" class="photo"></image>
			</view>
		</view>
		
		<view class="btn">确认提交</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        },
        onLoad() {
            
        },
        methods: {
            
        }
    };
</script>

<style lang="scss">
	
    page{
        background-color: #f5f5f5;
    }
	.content {
		padding: 20rpx;
	}
	
	.bg {
		width: 100%;
		height: 390rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: linear-gradient(to bottom, #2658aa, #f5f5f5);
	}
	
	.box{
	    background-color: #fff;
	    border-radius: 20rpx;
	    margin-bottom: 20rpx;
	    padding: 0 25rpx;
	}
	.item{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 30rpx;
	}
	.del-07{
	    width: 160rpx;
	    height: 160rpx;
	    border-radius: 10rpx;
	    border: 2rpx solid #e6e6e6;
	    margin-right: 15rpx;
	}
	.goods-name{
	    font-size: 28rpx;
	    font-weight: bold;
	    width: 480rpx;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.spec{
		font-size: 26rpx;
		color: #7d7d7d;
		padding-top: 6rpx;
	}
	.down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 18rpx;
		font-size: 26rpx;
	}
	.price{
	    font-size: 24rpx;
	}
	.price-num{
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.total{
	    padding-top: 30rpx;
	    border-top: 2rpx solid #e6e6e6;
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
		font-size: 26rpx;
	}
	.total-price{
	    color: #f62a2a;
	}
	.total-price-num{
	    color: #f62a2a;
	    font-size: 42rpx;
	    font-weight: bold;
	}
	
	.tip{
		font-size: 26rpx;
		color: #616161;
		padding: 10rpx 0 20rpx;
	}
	.box2{
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.item2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item2:last-child{
		border-bottom: none;
	}
	.name2{
		flex: 1;
		font-size: 30rpx;
		font-weight: bold;
		word-break: break-all;
		white-space: pre-line;
		padding-right: 20rpx;
	}
	.choose-1{
		width: 31rpx;
		height: 31rpx;
	}
	
	.text{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 330rpx;
	}
	.t-inp{
		width: 100%;
		height: 330rpx;
	}
	.img-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding-top: 15rpx;
	}
	.photo{
		width: 149rpx;
		height: 149rpx;
		border-radius: 10rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}
	.btn{
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		background-color: #2558ab;
		border-radius: 50rpx;
		margin-top: 70rpx;
	}

</style>
